<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" currBg="usuallyBg" :needConBlock="true">
			<template v-slot:search="{user}">
				<sq-search searchTxt="请输入周边配套名称" :hasBack="user.hasBack" searchType="sqPt"></sq-search>
			</template> 
		</custom-nav-sq-xcx>
		<view class="sqConBlock"></view>
		<view class="sqConWrap sqNearPt posAbso" :style="{top:(navHeight + blockHei) + 'px'}">
			<view class="ptBanner"></view>
			<view class="sqPtMod spaceBet">
				<view class="ptModItem"
					v-for="(item,index) in ptModArr"
					:key="index"
				>
					<view class="iconfont" :class="item.iconName"></view>
					<view class="ptName">{{item.name}}</view>
				</view>
			</view>
			<view class="ptListWrap">
				<scroll-view scroll-y style="height: 100%;">
					<view class="ptList hasFlex">
						<view class="shImg"></view>
						<view class="shContent">
							<view class="name hasFlex alignCen">
								<view class="typeTag">商超便利</view>
								<text class="shName ellip">阳光花发射点发生园拜新超市</text>
							</view>
							<view class="shAdd hasMargBot">
								<text>周一至周日 08:00-23:00</text>
							</view>
							<view class="shAdd spaceBet">
								<view class="address">
									<view class="ellip">房贷首付发发士大夫大师傅士大犯得范德萨</view>
								</view>
								<text class="distance">1.26Km</text>
							</view>
						</view>
					</view>
					
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import SqSearch from '@/components/sq-search/sq-search'
	export default {
		components:{
			SqSearch
		},
		data(){
			return{
				navHeight:getApp().globalData.navHeight,
				blockHei:0,
				ptModArr:[
					{name:'卫生中心',iconName:'icon-wszx'},
					{name:'社区药店',iconName:'icon-sqyd'},
					{name:'沿街门店',iconName:'icon-yjmd'},
					{name:'其他',iconName:'icon-qtfw'}
				]
			}
		},
		onLoad(){
			uni.createSelectorQuery().select('.sqConBlock').boundingClientRect(data => {
				this.blockHei = data.height;
			}).exec()
		}
	}
</script>

<style lang="scss">
	page{
		background: $sq-fuf;
	}
	.sqNearPt{
		left: 0;
		right: 0;
		bottom: 0;
		.comMb{
			margin-bottom: 30rpx;
		}
		.ptBanner{
			height:160rpx;
			background: $pss-sq-main-bg;
			border-radius: 16rpx;
			@extend .comMb;
		}
		.sqPtMod{
			@extend .comMb;
			.ptModItem{
				width: 23%;
				height: 120rpx;
				background: #E6D9FF;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #a899ef;
				font-size: 28rpx;
				.iconfont{
					font-size: 42rpx;
					color: #7268FF;
					margin-bottom: 5rpx;
					&.icon-sqyd{
						font-size: 46rpx;
					}
					&.icon-yjmd,
					&.icon-qtfw{
						font-size: 50rpx;
					}
				}
			}
		}
		.ptListWrap{
			height: calc(100% - 160rpx - 166rpx);
			.ptList{
				margin-bottom: 30rpx;
				&:last-child{
					margin-bottom: 0;
				}
			}
			.shImg{
				width: 170rpx;
				height: 170rpx;
				background: pink;
				border-radius: 16rpx;
				margin-right: 15rpx;
				flex-shrink: 0;
			}
			.shContent{
				width: 73%;
				.name{
					margin-bottom: 40rpx;
				}
				.typeTag{
					height: 46rpx;
					line-height: 46rpx;
					background: #E6D9FF;
					color: #7268FF;
					font-size: 24rpx;
					padding: 0 15rpx;
					border-radius: 20rpx 0 20rpx 0;
					margin-right: 10rpx;
				}
				.shName{
					color: $sq-main0;
					font-size: 30rpx;
					font-weight: 600;
					flex: 1;
				}
				.shAdd{
					font-size: 26rpx;
					color: $sq-main8;
					&.hasMargBot{
						margin-bottom: 20rpx;
					}
				}
				.address{
					width: 80%;
				}
				.distance{
					color: #34C98E;
				}
			}
		}
	}
</style>